<template>
    <l-layout style="padding:16px 16px 20px;" :top='216' class="l-tab-page">
        <template #top>
            <l-panel style="padding:0 0 12px;">
                <div class="topDiv">
                    <el-row>
                        <el-col :span="5">
                            <div class="serverInformation">
                                <p class="serInfoTitle title">{{ $t('服务器信息') }}</p>
                                <div class="line"></div>
                                <ul>
                                    <li><span class="dot"></span><span class="article" :title="name">{{ $t('名称') }}：{{name}}</span></li>
                                    <li><span class="dot secondDot"></span><span class="article" :title="version">{{ $t('版本') }}：{{version}}</span></li>
                                    <li><span class="dot third"></span><span class="article" :title="ip">{{ $t('IP地址') }}：{{ip}}</span></li>
                                </ul>
                            </div>
                        </el-col>
                        <el-col :span="19">
                            <div class="serverUsage">
                               <p class="serInfoTitle title">{{ $t('服务器使用率') }}</p>
                                <div class="line"></div>
                                <el-row class="rightDivPadding">
                                    <el-col :span="8">
                                        <div class="rightDiv">
                                            <el-row type="flex" justify="space-between">
                                                <el-col :span="9"><p>{{ $t('程序运行CPU使用率') }}</p></el-col>
                                                <el-col :span="10"></el-col>
                                                <el-col :span="5">
                                                    <el-tooltip class="item" effect="dark" placement="top">
                                                        <div slot="content">{{ $t('CPU使用率') }}（%）：{{cpuNumber}}%<br/>{{ $t('CPU剩余率') }}（%）：{{cpuNumberRemain}}%</div>
                                                        <el-progress type="circle" :stroke-width="12" :percentage="cpuNumber" :width='82'></el-progress>
                                                    </el-tooltip>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </el-col>
                                    <el-col :span="8">
                                        <div class="rightDiv needMargin">
                                            <el-row type="flex" justify="space-between">
                                                <el-col :span="9"><p>{{ $t('内存使用率') }}</p></el-col>
                                                <el-col :span="9"></el-col>
                                                <el-col :span="6">
                                                    <el-tooltip class="item" effect="dark" placement="top">
                                                        <div slot="content">{{ $t('内存使用率') }}（%）：{{memoryNumber}}%<br/>{{ $t('内存剩余率') }}（%）：{{memoryNumberRemain}}%</div>
                                                         <el-progress type="circle" :stroke-width="12" :percentage="memoryNumber" :color="colorGreen" :width='82'></el-progress>
                                                    </el-tooltip>
                                                   
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </el-col>
                                    <el-col :span="8">
                                        <div class="rightDiv">
                                            <el-row type="flex" justify="space-between">
                                                <el-col :span="9"><p>{{ $t('磁盘使用率') }}</p></el-col>
                                                <el-col :span="10"></el-col>
                                                <el-col :span="5">
                                                      <el-tooltip class="item" effect="dark" placement="top">
                                                        <div slot="content">{{ $t('磁盘使用率') }}（%）：{{diskNumber}}%<br/>{{ $t('磁盘剩余率') }}（%）：{{diskNumberRemain}}%</div>
                                                             <el-progress type="circle" :stroke-width="12" :percentage="diskNumber" :color="colorYellow"  :width='82'></el-progress>
                                                    </el-tooltip>
                                                
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-col>
                    </el-row>
                    
                   
                </div>
            </l-panel>
           
        </template>
    
        <l-panel style="padding:0px;">
            <el-row>
                <el-col :span="24"> 
                     <p class="serInfoTitle title"> {{name}} {{ $t('监控Details') }}</p>
                     <div class="line"></div>
    
                     <div class="bottomDiv">
    
                        <div style="display:flex; justify-content:space-between">
                            <div>
                                <el-radio-group v-model="categoryId" :disabled="tableLoading" size="mini" @change="handleCaregoryChange">
                                    <el-radio-button label="1">{{ $t('实时') }}</el-radio-button>
                                    <el-radio-button label="2" v-if="buttonFlag==true">{{ $t('近24小时') }}</el-radio-button>
                                    <el-radio-button label="3" v-if="buttonFlag===true">{{ $t('近7天') }}</el-radio-button>
                                </el-radio-group>
    
                                <span style="margin-left:100px;" v-if="buttonFlag==true">{{ $t('选择日期') }}：</span><l-date size="mini" v-model="date" style="width:200px;" dateType="daterange" v-if="buttonFlag==true"></l-date>
                                <span style="margin-left:32px;">{{ $t('时间粒子') }}：</span>
                                <l-select v-model="time" :options="options" size="mini" style="width:114px;" @change="handleChangeTime"></l-select>
                            </div>
    
                            <div>
                                <el-button size="mini" type="primary" style="width:76px;" @click="refresh"> {{ $t('刷新') }}</el-button>
                            </div>
                        </div>
    
                        
                        <div class="buttomTitle">
                            <el-row>
                                <el-col :span="2"><p style="color:#f1f2f5;">1</p></el-col>
                                <el-col :span="20"><p>{{ $t('CPU使用率') }}（%）</p></el-col>
                                
                                <el-col :span="2"></el-col>
                                <el-col :span="2"></el-col>
                            </el-row>
                        </div>
                        <div class="buttomImg">
                             <el-row>
                                <el-col :span="2"><p class="detail detailTitle">{{ $t('CPU监控') }}</p></el-col>
                                <el-col :span="20" >
                                    <div id="chart1" class="l-rblock" style="width:100%;height:136px;"></div>
                                </el-col>
                               
                                <el-col :span="2"></el-col>
                            </el-row>
                            <div class="line" style="marign-bottm:32px;"></div>
                        </div>
    
    
                         <div class="buttomTitle">
                            <el-row>
                                <el-col :span="2"><p style="color:#f1f2f5;">1</p></el-col>
                                <el-col :span="18"><p>{{ $t('内存使用率') }}（%）</p></el-col>
                                <el-col :span="2"></el-col>
                                <el-col :span="2"></el-col>
                                <el-col :span="2"></el-col>
                            </el-row>
                        </div>
                        <div class="buttomImg">
                             <el-row>
                                <el-col :span="2"><p class="detail detailTitle">{{ $t('内存监控') }}</p></el-col>
                                <el-col :span="20">
                                    <div id="chart2" class="l-rblock" style="width:100%;height:136px;"></div>
                                </el-col>
                                <el-col :span="2"></el-col>
                            </el-row>
                            <div class="line" style="marign-bottm:74px;"></div>
                        </div>
    
                        
                         <div class="buttomTitle">
                            <el-row>
                                <el-col :span="2"><p style="color:#f1f2f5;">1</p></el-col>
                                <el-col :span="18"><p >{{ $t('磁盘使用率') }}（%）</p></el-col>
                                <el-col :span="2"></el-col>
                                <el-col :span="2"></el-col>
                            </el-row>
                        </div>
                        <div class="buttomImg">
                             <el-row>
                                <el-col :span="2"><p class="detail detailTitle">{{ $t('磁盘监控') }}</p></el-col>
                                <el-col :span="20">
                                    <div id="chart3" class="l-rblock" style="width:100%;height:136px;"></div>
                                </el-col>
                                <el-col :span="2"><p class="detail needCenter"></p></el-col>
                            </el-row>
                            <div class="line"></div>
                        </div>
                
                       
                     </div>
    
                </el-col>
            </el-row>
           
        </l-panel>
    </l-layout>
    </template>
    
    <script>
    const api = window.$api.system.monitor
    export default {
        data(){
            return{
                // 服务器信息
                name:'',
                version:'',
                ip:'',
    
                // 服务器使用率
                cpuNumber:0,
                cpuNumberRemain:100,
                memoryNumber:0,
                memoryNumberRemain:100,
                diskNumber:0,
                diskNumberRemain:100,
    
                colorGreen:'#00B300',
                colorYellow:'#FF8000',
    
                // 监控Details
                usedThreadCount:null,
    
    
                 categoryId:'1',
                 tableLoading:false,
    
                 date: this.addDay(+0) + " - " + this.addDay(+0),
                 time:'10秒',

                 intervalTime:10,
    
    
                 intervalId:null,  
    
                 buttonFlag:false,
    
                // 这里是echarts图表
                echartCpu:null,
                echartMemory:null,
                echartDisk:null,
                option:{
                    toolbox: {
                        show: true,
                        right: 24,
                        feature: {
                        saveAsImage: {}
                        }
                    },
                    grid:{
                        left:70,
                        top:22,
                        width:1230,
                        height:94,
                        containLabel: false,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        },
                        formatter:(params)=>{
                            var result =params[0].name;
                            params.forEach((item)=>{
                                result += '<br/>';
                                result +=
                                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'+item.color +'"></span>';
                                result += this.$t('CPU使用率') +' ：<b>' + item.value+' %' + '</b>';
                            })
                            return result;
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data:[],
                       
                        show:true,
                        axisLine:{
                            show:true
                          },
                        axisTick:{
                            show:true
                        },
                        splitLine:{
                            show:false
                        }
                    },
                    yAxis: {
                        min:0,
                        max:100,
                        splitNumber:2,
                        interval:50,
                        show:true,
                          axisLine:{
                            show:false
                          },
                        axisTick:{
                            show:false
                        },
                        splitLine:{
                            show:true
                        }
                    },
                    series: [
                        {
                        data:[],
                        type: 'line',
                        symbol: 'circle',
                        symbolSize: 9, 
                        itemStyle:{
                             normal: {
                                color:'#5B8FF9' 
                             },
                        },
                        lineStyle: {
                            width: 2,
                            color:'#5B8FF9'
                        },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.25,
                            color:{
                                 type: 'linear',
                                 x: 0,
                                 y: 0,
                                 x2: 0,
                                 y2: 1,
                                 colorStops: [{
                                    offset: 0, color: '#5B8FF9' 
                                 }, {
                                    offset: 1, color: '#FFFFFF' 
                                }],
                                global: false 
                            }
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        }
                    ]                
                },
                optionMemory:{
                    toolbox: {
                        show: true,
                        right: 24,
                        feature: {
                        saveAsImage: {}
                        }
                    },
                    grid:{
                         left:70,
                        top:22,
                        width:1230,
                        height:94,
                        containLabel: false,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        },
                        },
                        formatter:(params)=>{
                            var result =params[0].name;
                            params.forEach((item)=>{
                                result += '<br/>';
                                result +=
                                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'+item.color +'"></span>';
                                result += this.$t('内存使用率') + ' ：' + '<b>' + item.value+' %' + '</b>';
                            })
                            return result;
                        }
                    },
    
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data:[],
                        
                        show:true,
                        axisLine:{
                            show:true
                          },
                        axisTick:{
                            show:true
                        },
                        splitLine:{
                            show:false
                        }
                    },
                    yAxis: {
                        min:0,
                        max:100,
                        splitNumber:2,
                        interval:50,
                        show:true,
                          axisLine:{
                            show:false
                          },
                        axisTick:{
                            show:false
                        },
                        splitLine:{
                            show:true
                        }
                    },
                    series: [
                        {
                        data:[],
                        symbol: 'circle',
                        symbolSize: 9, 
                        itemStyle:{
                            normal: {
                                color:'#00B300' 
                            },
                        },
                        type: 'line',
                        lineStyle: {
                            width: 2,
                            color:'#00B300'
                        },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.25,
                            color:{
                                 type: 'linear',
                                 x: 0,
                                 y: 0,
                                 x2: 0,
                                 y2: 1,
                                 colorStops: [{
                                    offset: 0, color: '#00B300' 
                                 }, {
                                    offset: 1, color: '#FFFFFF' 
                                }],
                                global: false 
    
                            }
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        }
                    ]                
                },
                optionDisk:{
                    toolbox: {
                        show: true,
                        right: 24,
                        feature: {
                        saveAsImage: {}
                        }
                    },
                    grid:{
                        left:70,
                        top:22,
                        width:1230,
                        height:94,
                        containLabel: false,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                        },
                        formatter:(params)=>{
                            var result =params[0].name;
                            params.forEach((item)=>{
                                result += '<br/>';
                                result +=
                                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'+item.color +'"></span>';
                                result += this.$t('磁盘使用率') + ' ：' + '<b>' + item.value+' %' + '</b>';
                            })
                            return result;
                        }
                    },
    
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data:[],
                        show:true,
                        axisLine:{
                            show:true
                          },
                        axisTick:{
                            show:true
                        },
                        splitLine:{
                            show:false
                        }
                    },
                    yAxis: {
                        min:0,
                        max:100,
                        splitNumber:2,
                        interval:50,
                        show:true,
                          axisLine:{
                            show:false
                          },
                        axisTick:{
                            show:false
                        },
                        splitLine:{
                            show:true
                        }
                    },
                    series: [
                        {
                        data:[],
                        symbol: 'circle',
                        symbolSize: 9, 
                        itemStyle:{
                            normal: {
                                color:'#FF8000' 
                            },
                        },
                        type: 'line',
                        lineStyle: {
                            width: 2,
                            color:'#FF8000'
                        },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.25,
                            color:{
                                 type: 'linear',
                                 x: 0,
                                 y: 0,
                                 x2: 0,
                                 y2: 1,
                                 colorStops: [{
                                    offset: 0, color: '#FF8000' 
                                 }, {
                                    offset: 1, color: '#FFFFFF' 
                                }],
                                global: false 
                            }
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        }
                    ]                
                },
    
                
            }
        },
        created(){
            this.dataRefresh();
        },
        mounted(){
            this.initChart();
            this.init()
        },
        destroyed(){                      
            this.clear();                     
        },
        computed: {
            options(){
                return [{"value":"10"+this.$t("秒"),"label":"10" + this.$t("秒")},{"value":"1" + this.$t("分钟"),"label":"1" + this.$t("分钟")},{"value":"5" + this.$t("分钟"),"label":"5" + this.$t("分钟")}]
            },

        },
        methods:{
            // 获取当前日期
            addDay(dayNumber, date) {
                date = date ? date : new Date();
                var ms = dayNumber * (1000 * 60 * 60 * 24);
                var newDate = new Date(date.getTime() + ms);
                var year = newDate.getFullYear(); 
                var mon = newDate.getMonth() + 1; 
                var day = newDate.getDate(); 
                return year + "-" + mon + "-" + day;
            },
            
            init(){
                this.loadTableData()
            },
    
            async loadTableData(){
                let data= await this.$awaitWraper(api.getData());
    
                // 赋值服务器信息
                this.name=data.server.machineName
                this.version=data.server.osVersion
                this.ip=data.server.iPv4
    
                // 赋值服务器使用率
                this.cpuNumber=Math.round(data.application.cpu.usagePercent)
                this.cpuNumberRemain=100-this.cpuNumber
                this.memoryNumber=Math.round(data.application.memory.memoryPercent)
                this.memoryNumberRemain=100-this.memoryNumber
                this.diskNumber=Math.round(data.application.disk.diskPercent*100)
                this.diskNumberRemain=100-this.diskNumber
    
    
                // 监控Details
                this.usedThreadCount=data.application.thread.usedThreadCount
                
                 if(this.option.xAxis.data.length<=20){
                    this.option.xAxis.data.push(data.server.systemDateTime)
                    this.option.series[0].data.push(Math.round(data.application.cpu.usagePercent))
                    this.optionMemory.xAxis.data.push(data.server.systemDateTime)
                    this.optionMemory.series[0].data.push(Math.round(data.application.memory.memoryPercent))
                    this.optionDisk.xAxis.data.push(data.server.systemDateTime)
                    this.optionDisk.series[0].data.push(Math.round(data.application.disk.diskPercent*100))
    
                 }else{
                    this.option.xAxis.data.shift()
                    this.option.xAxis.data.push(data.server.systemDateTime)
                    this.option.series[0].data.shift()
                    this.option.series[0].data.push(Math.round(data.application.cpu.usagePercent))
    
                    this.optionMemory.xAxis.data.shift()
                    this.optionMemory.xAxis.data.push(data.server.systemDateTime)
                    this.optionMemory.series[0].data.shift()
                    this.optionMemory.series[0].data.push(Math.round(data.application.memory.memoryPercent))
                    
                    this.optionDisk.xAxis.data.shift()
                    this.optionDisk.xAxis.data.push(data.server.systemDateTime)
                    this.optionDisk.series[0].data.shift()
                    this.optionDisk.series[0].data.push(Math.round(data.application.disk.diskPercent*100))
                 }
                this.initChart()
            },
    
            //  Clear数据
            clearData(){
                this.name='';
                this.version='';
                this.ip='';
    
                this.cpuNumber=0;
                this.cpuNumberRemain=100;
                this.memoryNumber=0;
                this.memoryNumberRemain=100;
                this.diskNumber=0;
                this.diskNumberRemain=100;
                
                this.option.xAxis.data=[]
                this.option.series[0].data=[]
                this.optionMemory.xAxis.data=[]
                this.optionMemory.series[0].data=[]
                this.optionDisk.xAxis.data=[]
                this.optionDisk.series[0].data=[]
            },
    
    
            
            handleChangeTime(){
                if(this.time=="10" + this.$t("秒")){
                    this.intervalTime=10
                    this.clear()
                    this.clearData()
                    this.loadTableData()
                    this.dataRefresh()
    
                }else if(this.time=="1" + this.$t("分钟")){
                    this.intervalTime=60
                    this.clear()
                    this.clearData()
                    this.loadTableData()
                    this.dataRefresh()
                }else if(this.time=="5" + this.$t("分钟")){
                    this.intervalTime=300
                    this.clear()
                    this.clearData()
                    this.loadTableData()
                    this.dataRefresh()
                }
            },
    
            // 刷新按钮
            refresh(){
                this.clear()
                this.clearData()
                this.loadTableData()
                this.dataRefresh()
            },
    
    
    
            handleCaregoryChange(){},
    
    
            dataRefresh(){
                if (this.intervalId != null) {        
                    return;
                }                                      
                this.intervalId = setInterval(() => {
                    this.loadTableData();
                }, (1000*this.intervalTime));
            },
            clear() {                                     
                clearInterval(this.intervalId);           
                this.intervalId = null;                   
            },
            initChart(){
                this.echartCpu = window.echarts.init(document.getElementById('chart1'));
                this.echartCpu.setOption(this.option);
                window.onresize=this.echartCpu.resize;
                this.echartMemory = window.echarts.init(document.getElementById('chart2'));
                this.echartMemory.setOption(this.optionMemory);
                this.echartDisk = window.echarts.init(document.getElementById('chart3'));
                this.echartDisk.setOption(this.optionDisk);
            },
           
    
        }
    }
    </script>
    
    <style lang='scss' scoped>
     @import "../../../../styles/monitor/index.scss";
    </style>